<template>
  <div class="container">
    <el-row>
      <el-form :model="formInline" @keyup.enter.native="search">
        <el-col :span="6" align="left">
          <el-form-item :label="$t('m.container.username')" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="formInline.username"></el-input>
          </el-form-item>
          <el-form-item :label="$t('m.container.arrangetype')" :label-width="formLabelWidth">
            <el-select v-model="formInline.arrangetype" :placeholder="$t('m.choose')">
              <el-option v-for="item in arrangetypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" align="left">
          <el-form-item :label="$t('m.container.usertype')" :label-width="formLabelWidth">
            <el-select v-model="formInline.usertype" :placeholder="$t('m.choose')">
              <el-option v-for="item in usertypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('m.container.operationtype')" :label-width="formLabelWidth">
            <el-select v-model="formInline.operationtype" :placeholder="$t('m.choose')">
              <el-option v-for="item in operationtypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" align="left">
          <el-row>
            <el-form-item :label="$t('m.stock.createdate')" :label-width="formLabelWidth">
              <el-date-picker v-model="operationdate" type="daterange" value-format="yyyy-MM-dd" range-separator="-" :start-placeholder="$t('m.otherstore.startdate')" :end-placeholder="$t('m.otherstore.enddate')"></el-date-picker>
            </el-form-item>
          </el-row>
        </el-col>
        <el-col :span="24" align="right">
          <el-form-item>
            <el-button type="primary" @click="search" v-if="hasPermission('search')">{{$t('m.query')}}</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div class="ellipse"></div>
    <el-table ref="table" stripe empty-text fits class="table-wrap single-select-table" :data="tableData" :row-style="tableRowStyle" :row-class-name="tableRowClassName" @row-click="rowClick" v-loading="tableLoading">
      <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
      <el-table-column align="center" prop="username" :label="$t('m.container.username')"></el-table-column>
      <el-table-column align="center" prop="area" :label="$t('m.container.area')"></el-table-column>
      <el-table-column align="center" prop="arrangetype" :label="$t('m.container.arrangetype')"></el-table-column>
      <el-table-column align="center" prop="operationtype" :label="$t('m.container.operationtype')" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="creator" :label="$t('m.stock.creator')"></el-table-column>
      <el-table-column align="center" prop="createdate" :label="$t('m.stock.createdate')"></el-table-column>
    </el-table>

    <el-pagination background layout="sizes, prev, pager, next, jumper" :page-sizes="pageSizeList" :page-size="rowSize" :current-page="page" :total="totalRows" @current-change="currentChangeInitFn" @size-change="handleSizeChangeInitFn"></el-pagination>
  </div>
</template>

<script>
import common from '@/utils/common'
export default {
  name:'arrivalNotice',
  components:{
  },
  data(){
    return {
      formInline:{
        username:'',
        arrangetype:'',
        usertype:'',
        operationtype:''
      },
      operationdate:[],
      tableData:[],
      formLabelWidth:'140px'
    }
  },
  computed:{
    arrangetypes(){
      return [
        {
          value:'',
          label:this.$t('m.all')
        },
        {
          value:'APP',
          label:'APP'
        },
        {
          value:'SYSTEM',
          label:'SYSTEM'
        },
        {
          value:'PC',
          label:'PC'
        }
      ]
    },
    operationtypes(){
      return [
        {
          value:'',
          label:this.$t('m.all')
        },
        {
          value:'Log_in',
          label:'LOGIN'
        },
        {
          value:'Log_out',
          label:'LOGOUT'
        },
        {
          value:'Suspending',
          label:'SUSPENDING'
        }
      ]
    },
    usertypes(){
      return [
        {
          value:'',
          label:this.$t('m.all')
        },
        {
          value:'AREA',
          label:'AREA'
        },
        {
          value:'TRUCK',
          label:'TRUCK'
        }
      ]
    }
  },
  watch:{

  },
  methods:{
    search(){
      this.page = 1
      this.init()
    },
    init(){
      let [operationstartdate, operationenddate] = this.operationdate || Array.from(2)
      this.tableLoading = true
      this.$axios({
        method:'get',
        url:'/areascheduing/operationlog/page',
        params:{
          page:this.page,
          rows:this.rowSize,
          username:this.formInline.username,
          arrangetype:this.formInline.arrangetype,
          usertype:this.formInline.usertype,
          operationtype:this.formInline.operationtype,
          operationstartdate,
          operationenddate
        }
      }).then(({ data }) => {
        for (let i = 0;i < data.records.length;i++){
          data.records[i].createdate = common.timestampToTime(
            data.records[i].createdate
          )
        }
        this.tableData = data.records
        this.totalRows = data.total
        setTimeout(()=>this.tableLoading=false,500)
      })
    }
  },
  activated(){
    this.init()
  },
  mounted(){
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="scss" scoped>
.el-table td,
.el-table th.is-leaf {
  border-bottom: none;
}
.el-form {
  width: 100%;
}
.el-input,
.el-form-item__content {
  width: 100%;
}
.el-input--mini {
  padding-right: 15px;
}
.el-select {
  display: block;
}
.el-radio > span {
  font-size: 10px;
}
.el-input--mini {
  padding-right: 0;
}
</style>
